@import './com1';

main {
    .box1 {
        
        .content1 {
            .ct_box {
                width: 100%;
                margin-top: 2.1875rem;
                display: flex;
                justify-content: center;
                .b_one {
                    margin-top: .5625rem;
                    position: relative;
                    img {
                        width: 100%;
                    }
                    &::before {
                        content: '热';
                        position: absolute;
                        top: -2.7500rem;
                        left: 0;
                        color: #fff;
                        display: inline-block;
                        font-size: 1.25rem;
                        line-height: 4.25rem;
                        text-align:center;
                        width: 2.5rem;
                        height: 6.25rem;
                        background: url(../img/games/2.png) no-repeat;
                    }
                    &::after {
                        content: '门';
                        position: absolute;
                        top: -1.7500rem;
                        left: 0;
                        color: #fff;
                        display: inline-block;
                        font-size: 1.25rem;
                        line-height: 5.25rem;
                        text-align: center;
                        width: 2.5rem;
                        height: 6.25rem;
                    }
                }
                .b_two {
                    display: flex;
                    flex-direction: column;
                    h2 {
                        margin: 0;
                        font-size: 1.8725rem;
                        text-align: right;
                    }
                    p {
                        margin-top: 18px;
                        margin-bottom: 0;
                        font-size: .75rem;
                        width: 39.6875rem;
                        text-indent: 1em;
                        text-align: right;
                        line-height: 2rem;
                        color: #bdbdbd;
                    }
                    .two_1 {
                        margin-top: 1.875rem;
                        display: flex;
                        img:nth-of-type(2) {
                            margin-left: 30px;
                        }
                    }
                }
            }
        }
    }

    .box2 {
        
        .content2 {
            .ct_box {
                width: 100%;
                margin-top: 3.875rem;
                display: flex;
                justify-content: center;
                .b_two {
                    margin-top: 1.75rem;
                    img {
                        width: 100%;
                    }
                }
                .b_one {
                    display: flex;
                    flex-direction: column;
                    h2 {
                        margin: 0;
                        font-size: 1.8725rem;
                    }
                    p {
                        margin-top: 18px;
                        margin-bottom: 0;
                        font-size: .75rem;
                        width: 39.6875rem;
                        text-indent: 1em;
                        line-height: 2rem;
                        color: #bdbdbd;
                    }
                    .two_1 {
                        margin-top: 1.875rem;
                        display: flex;
                        img:nth-of-type(2) {
                            margin-left: 30px;
                        }
                    }
                }
            }
        }
    }

    .box3 {
        .content3 {
            .ct_box {
                .b_one {
                    margin-top: 7.875rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    h2 {
                        margin-bottom: 2.5625rem;
                        padding-left: 6rem;
                        font-size: 36px;
                    }
                    .one_1 {
                        margin-bottom: 2.8125rem;
                        display: flex;
                        justify-content: center;
                        div {
                            
                            width: 19.125rem;
                            text-align: center;
                            span {
                                display: inline-block;
                                margin-top: .75rem;
                                font-size: .875rem;
                            }
                            img {
                                border-radius: .525rem;
                            }
                            &:nth-of-type(2) {
                                margin: 0 1.8125rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width:768px) and (max-width:970px) {
    main {
        .box1 {
            
            .content1 {
                .ct_box {
                    width: 100%;
                    margin-top: 2.1875rem;
                    display: flex;
                    justify-content: center;
                    .b_one {
                        margin-top: .5625rem;
                        position: relative;
                        img {
                            display: none;
                        }
                        &::before {
                            width: 0;
                        }
                        &::after {
                            width: 0;
                        }
                    }
                    .b_two {
                        display: flex;
                        flex-direction: column;
                        h2 {
                            margin: 0;
                            font-size: 1.8725rem;
                            text-align: right;
                        }
                        p {
                            margin-top: 18px;
                            margin-bottom: 0;
                            font-size: .75rem;
                            width: 39.6875rem;
                            text-indent: 1em;
                            text-align: right;
                            line-height: 2rem;
                            color: #bdbdbd;
                        }
                        .two_1 {
                            margin-top: 1.875rem;
                            display: flex;
                            img:nth-of-type(2) {
                                margin-left: 30px;
                            }
                        }
                    }
                }
            }
        }
    
        .box2 {
            
            .content2 {
                .ct_box {

                    .b_two {
                        img {
                            display: none;
                        }
                    }

                }
            }
        }
    
        .box3 {
            .content3 {
                .ct_box {
                    .b_one {

                        margin-top: 1.625rem;
                        h2 {

                        }
                        .one_1 {

                            div {

                                img {
                                    width: 100%;
                                    border-radius: .525rem;
                                }

                            }
                        }
                    }
                }
            }
        }
    }
}


@media screen and (max-width:767px) {
    main {
        .box1 {
            
            .content1 {
                .ct_box {
                    width: 100%;
                    margin-top: 2.1875rem;
                    display: flex;
                    justify-content: center;
                    .b_one {
                        margin-top: .5625rem;
                        position: relative;
                        img {
                           display: none;
                        }
                        &::before {
                            width: 0rem;
                        }
                        &::after {
                            width: 0rem;
                        }
                        
                    }
                    .b_two {
                        display: flex;
                        flex-direction: column;
                        h2 {
                            margin: 0;
                            font-size: 1.8725rem;
                            text-align: right;
                        }
                        p {
                            margin-top: 18px;
                            margin-bottom: 0;
                            font-size: .75rem;
                            width: 100%;
                            text-indent: 1em;
                            text-align: right;
                            line-height: 2rem;
                            color: #bdbdbd;
                        }
                        .two_1 {
                            display: none;
                            img:nth-of-type(2) {
                                margin-left: 30px;
                            }
                        }
                    }
                }
            }
        }
    
        .box2 {
            
            .content2 {
                .ct_box {
                    .b_two {
                        img {
                            display: none;
                        }
                    }
                    .b_one {
                        display: flex;
                        flex-direction: column;
                        h2 {
                            margin: 0;
                            font-size: 1.8725rem;
                        }
                        p {
                            margin-top: 0px;
                            margin-bottom: 0;
                            font-size: .75rem;
                            width: 100%;
                            text-indent: 1em;
                            line-height: 2rem;
                            color: #bdbdbd;
                        }
                        .two_1 {
                            display: none;
                            img:nth-of-type(2) {
                                margin-left: 30px;
                            }
                        }
                    }
                }
            }
        }
    
        .box3 {
            .content3 {
                .ct_box {
                    .b_one {
                        margin-top: .875rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        h2 {
                            margin-bottom: 2.5625rem;
                            padding-left: 0rem;
                            font-size: 36px;
                        }
                        .one_1 {
                            margin-bottom: 2.8125rem;
                            display: flex;
                            justify-content: center;
                            div {
                                
                                width: 19.125rem;
                                text-align: center;
                                span {
                                    display: inline-block;
                                    margin-top: .75rem;
                                    font-size: .875rem;
                                }
                                img {
                                    width: 100%;
                                }
                                &:nth-of-type(2) {
                                    margin: 0 1.8125rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}